
<style>
    .slider-container {
        width: 300px;
        padding-top: 7px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .slider-container .back-bar {
        height: 10px;
        position: relative;
    }

    .slider-container .back-bar .selected-bar {
        position: absolute;
        height: 100%;
    }

    .slider-container .back-bar .pointer {
        position: absolute;
        width: 10px;
        height: 10px;
        background-color: red;
        cursor: col-resize;
        opacity: 1;
        z-index: 2;
    }

    .slider-container .back-bar .pointer.last-active {
        z-index: 3;
    }

    .slider-container .back-bar .pointer-label {
        position: absolute;
        top: -17px;
        font-size: 8px;
        background: white;
        white-space: nowrap;
        line-height: 1;
    }

    .slider-container .back-bar .focused {
        z-index: 10;
    }

    .slider-container .clickable-dummy {
        cursor: pointer;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .slider-container .scale {
        top: 2px;
        position: relative;
    }

    .slider-container .scale span {
        position: absolute;
        height: 5px;
        border-left: 1px solid #999;
        font-size: 0;
    }

    .slider-container .scale ins {
        font-size: 9px;
        text-decoration: none;
        position: absolute;
        left: 0;
        top: 5px;
        color: #999;
        line-height: 1;
    }

    .slider-container.slider-readonly .clickable-dummy,
    .slider-container.slider-readonly .pointer {
        cursor: auto;
    }

    .theme-green .back-bar {
        height: 5px;
        border-radius: 2px;
        background-color: #eeeeee;
        background-color: #e7e7e7;
        background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
        background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
        background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
        background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    }

    .theme-green .back-bar .selected-bar {
        border-radius: 2px;
        background-color: #a1fad0;
        background-image: -moz-linear-gradient(top, #18bc9c, #76fabc);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#18bc9c), to(#76fabc));
        background-image: -webkit-linear-gradient(top, #18bc9c, #76fabc);
        background-image: -o-linear-gradient(top, #18bc9c, #76fabc);
        background-image: linear-gradient(to bottom, #18bc9c, #76fabc);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbdfade', endColorstr='#ff76fabc', GradientType=0);
    }

    .theme-green .back-bar .pointer {
        width: 14px;
        height: 14px;
        top: -5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid #AAA;
        background-color: #e7e7e7;
        background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
        background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
        background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
        background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    }

    .theme-green .back-bar .pointer-label {
        color: #999;
    }

    .theme-green .back-bar .focused {
        color: #333;
    }

    .theme-green .scale span {
        border-left: 1px solid #e5e5e5;
    }

    .theme-green .scale ins {
        color: #999;
    }

    .theme-blue .back-bar {
        height: 5px;
        border-radius: 2px;
        background-color: #eeeeee;
        background-color: #e7e7e7;
        background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
        background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
        background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
        background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    }

    .theme-blue .back-bar .selected-bar {
        border-radius: 2px;
        background-color: #92c1f9;
        background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9));
        background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9);
        background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9);
        background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);
    }

    .theme-blue .back-bar .pointer {
        width: 14px;
        height: 14px;
        top: -5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid #AAA;
        background-color: #e7e7e7;
        background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
        background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
        background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
        background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
    }

    .theme-blue .back-bar .pointer-label {
        color: #999;
    }

    .theme-blue .back-bar .focused {
        color: #333;
    }

    .theme-blue .scale span {
        border-left: 1px solid #e5e5e5;
    }

    .theme-blue .scale ins {
        color: #999;
    }

</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('学校')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="form-inline" data-toggle="cxselect" data-selects="school">
                <select class="form-control school" name="row[school_id]" data-url="school/cxSelect">
                    <option value="{$row['school_id']}"></option>
                </select>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('课程类型')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_select('row[type]', $typeData, $row['type'], ['class'=>'form-control selectpicker type', 'data-rule'=>'required'])}
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('任课教师')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select class="form-control teacher" name="row[teacher_id]">
                <option value="">请选择</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('学科')}:</label>
        <div class="col-xs-12 col-sm-8">
            <select class="form-control subject"  name="row[subject_id]">
                <option value="">请选择</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2 label_classes">
            {if $row['subject_id'] == 1}
            任课班级
            {else /}
            选课班级
            {/if}
        </label>
        <div class="col-xs-12 col-sm-8">
            <div id="classes" class="xm-select-demo"></div>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('是否签到打卡')}:</label>
        <div class="col-xs-12 col-sm-8">
            {:build_radios('row[is_clock_in]', ['1'=>__('Yes'), '0'=>__('No')], $row['is_clock_in'])}
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('签到时间')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input class="single-slider" type="hidden" name="row[clock_in_time]" value="{$row['clock_in_time']}" style="display: none;">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <span>延后 <span class="time">{$row['clock_in_time']}</span>分钟为迟到范围</span>
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script id="tplTeacher" type="text/html">
    <option value="">请选择</option>
    <%for(var i=0; i< data.length; i++){%>
    <option value="<%=data[i].value%>" <%if(data[i].value == {$row['teacher_id']}){%> selected <%}%>><%=data[i].name%></option>
    <%}%>
</script>
<script id="tplSubject" type="text/html">
    <option value="">请选择</option>
    <%for(var i=0; i< data.length; i++){%>
    <option value="<%=data[i].value%>" <%if(data[i].value == {$row['subject_id']}){%> selected <%}%>><%=data[i].name%></option>
    <%}%>
</script>